<template>
	<view class="com-chat-loading">
		<view class="com-chat-loading__spinner">
			<view class="com-chat-loading__rect1"></view>
			<view class="com-chat-loading__rect2"></view>
			<view class="com-chat-loading__rect3"></view>
			<view class="com-chat-loading__rect4"></view>
			<view class="com-chat-loading__rect5"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.com-chat-loading {
		display: flex;
		justify-content: center;

		@keyframes stretchdelay {

			0%,
			40%,
			100% {
				transform: scaleY(0.6);
			}

			20% {
				transform: scaleY(1.0);
			}
		}

		.com-chat-loading__spinner {
			width: 60rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			view {
				background-color: #f06c7a;
				height: 50rpx;
				width: 6rpx;
				border-radius: 6rpx;
				animation: stretchdelay 1.2s infinite ease-in-out;
			}

			.com-chat-loading__rect2 {
				animation-delay: -1.1s;
			}

			.com-chat-loading__rect3 {
				animation-delay: -1.0s;
			}

			.com-chat-loading__rect4 {
				animation-delay: -0.9s;
			}

			.com-chat-loading__rect5 {
				animation-delay: -0.8s;
			}
		}
	}
</style>